<template>
    <div class="searchglobal">
      
        <div class="ptlist">
            <div class="ptitem" v-for="item in slist" @click="tzym(item.id)" style="margin-bottom: 20px;">
                <div class="ptimg" style="margin-bottom: 0px;">
                    <img :src="item.cover" alt="">
                </div>
                <div class="ptinfo">
                    <div class="pttitle">{{ item.title }}</div>
                    <div class="price">￥{{ item.price }} <span>￥{{ item.t_price }}</span></div>
                </div>

            </div>
        </div>

        <div style="display: flex;justify-content: center;"><n-pagination v-model:page="page"  :on-update:page="updatepage" :page-sizes="[10]" :item-count="count" /></div>
    </div>
</template>
<script setup>
import { NTabs, NTabPane,NPagination } from 'naive-ui';
import { useRouter } from 'nuxt/app';
let { ctx: that, proxy } = getCurrentInstance()
const router = useRouter();
const keyword = ref("");
const page = ref(1);
const count=ref(0);
const value = ref("course");
import { useRoute } from "vue-router"
const route = useRoute()
const slist = ref([])



onMounted(()=>{
    getlist()
})
const changetab = (e) => {
    console.log(e, "eee")
    // console.log(value.value)
    value.value = e
    page.value=1
    getlist();
}
const updatepage=(e)=>{
    console.log(e,"e")
    page.value=e
    getlist();
}
const getlist = async () => {
    const { data } = await useHttp("", `/course/list?page=${page.value}`)
    console.log(data)
    slist.value = data.value.rows
    count.value=data.value.count
    console.log(count)
}
const tzym=(id)=>{
    router.push("/detail/"+id);
    
}
</script>
<style scoped>
.searchglobal {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.title {
    font-size: 20px;
}

.tabs {
    width: 100%;
    background: #fff;
}


.ptlist {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;

}

.pttitle {
    font-size: 15px;
    font-weight: bold;
}

.price {
    font-size: 15px;
    font-weight: bold;
    color: rgba(244, 63, 94, 1);
}

.price span {
    color: rgba(107, 114, 128, 0.7);
    text-decoration-line: line-through;
    font-weight: normal;
    font-size: 12px;
}

.ptstatus {
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(245, 158, 11, 1);
}

.statustext {
    font-size: 12px;
    color: #fff;
}

.ptitem {
  width: 24%;
  height: auto;
  margin-right: 20px;
  border-radius: 10px;
  cursor: pointer;
}

.ptitem:nth-child(4n) {
  margin-right: 0px !important;
}

.ptinfo {
  background: #fff;
  padding: 20px 30px;
  box-sizing: border-box;
}

.cardimg {
  width: 100%;
}

.cardimg img {
  width: 100%;
  border-radius: 5px;
}

.ptimg {
  width: 100%;
  height: 200px;
}

.ptimg img {
  width: 100%;
  height: 200px;

}
</style>